/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import 'theme-alignment.scss';
@import 'diff.scss';
@import 'monaco-editor/min/vs/editor/editor.main.css';

@include EditorContainer {
  flex: 1;

  /* This allows room for the horizontal scrollbar, and other
   miscellaneous monaco-editor bits that are positioned violently,
   without regard to the container. See
   https://github.com/Microsoft/monaco-editor/issues/29 */
  overflow: hidden;

  .monaco-editor .emphasis {
    font-style: italic;
  }

  /** Odd interactions with Kui themes. This leaves an odd box-shadow at
   * the top.  https://github.com/kubernetes-sigs/kui/issues/8295
   */
  .monaco-editor .scroll-decoration {
    box-shadow: none;
  }

  .monaco-editor {
    display: block;
    min-height: 23rem;
  }
  .monaco-editor {
    background: transparent;
  }

  .monaco-editor .main {
    /* ui.css has a .main rule that we have to override; otherwise, the
   completion/suggestion UI list elements will have zero height and be
   rendered invisible */
    height: auto;
  }
}

.code-highlighting {
  min-width: 0; /* hack needed for chrome to send resize events on shrink */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.code-highlighting > .monaco-editor {
  padding: 1rem 0;
  flex: 1;
  min-width: 0;
}

.kui .monaco-editor,
.kui .monaco-editor .margin,
.kui .monaco-editor-background {
  background: var(--color-sidecar-background-01);
}

.kui .monaco-editor .view-lines {
  -webkit-app-region: no-drag;

  /* monaco doesn't let us do this; we have to hard-wire it in the editor constructor in edit.js */
  /*font-size: 0.9rem !important;
    font-family: var(--font-monospace) !important;*/
}

.ql-editor > p {
  margin: 0;
}

.ql-editor:focus,
.ql-container code:focus {
  outline: none;
}

.editor-status {
  display: flex;
}
.editor-status > div {
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.kui--sidecar .editor-status:not(.is-new).is-modified .is-modified,
.kui--sidecar .editor-status:not(.is-new):not(.is-modified) .is-up-to-date,
.kui--sidecar .editor-status.is-new:not(.is-read-only) .is-new,
.kui--sidecar .editor-status.is-new.is-read-only .is-new-read-only {
  opacity: 1;
  width: auto;
  height: auto;
  pointer-events: unset;
}

/* wskflow container while editing compositions */
.kui--sidecar .monaco-editor-wrapper.half-height {
  max-height: 30%; /* hmm.. monaco is persistent in its height */
  flex: 3;
}
.wskflow-container.visible {
  max-height: 70%; /* ugh, wskflow also uses pixel dimensions */
  flex: 7;
  border-top: 1px solid var(--color-ui-04);
  background: var(--color-ui-01);

  /* see shell issue #885 */
  display: flex;
  flex-direction: column;
}
/* wskflow container in editor while sidecar is maximized */
.kui--tab-content.sidecar-full-screen #sidecar .code-highlighting {
  flex-direction: row;
}
.kui--tab-content.sidecar-full-screen #sidecar .monaco-editor-wrapper.half-height {
  max-height: none;
  max-width: 50%;
}
.kui--tab-content.sidecar-full-screen #sidecar .wskflow-container.visible {
  max-height: none;
  max-width: 50%;
}

/* gutter and inline decorations */
.editor.parse-error-gutter-marker {
  border-radius: 0.9375rem;
  background-color: var(--color-support-01);
  width: 1rem !important;
  height: 1rem !important;
}
.editor.parse-error-before-marker:hover {
  cursor: default;
}
.editor.parse-error-before-marker:before {
  content: '^';
  font-weight: bold;
  position: absolute;
  bottom: -1rem;
  color: var(--color-support-01);
}

/* tooltip text is unreadble */
.monaco-editor .monaco-editor-hover .hover-row p {
  background: var(--color-sidecar-toolbar-background);
  color: var(--color-sidecar-toolbar-foreground);
}

/** Error desiginations */
.kui--editor-line-glyph {
  background-color: var(--color-error);
}

/** Highlight designations */
.kui--editor-line-highlight {
  background-color: var(--color-base03);
}

/** TEMPORARY WORKAROUND FOR https://github.com/microsoft/monaco-editor/issues/2168 
 Please remove this hack once the fix is released; some version > 0.22.3 of monaco-editor */
.monaco-aria-container {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
